<template>
  <div class="custom-attribute--selector">
    <div
      v-on-clickaway="closeDropdown"
      class="label-wrap"
      @keyup.esc="closeDropdown"
    >
      <woot-button
        size="small"
        variant="link"
        icon="add"
        @click="toggleAttributeDropDown"
      >
        {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
      </woot-button>

      <div class="dropdown-wrap">
        <div
          :class="{ 'dropdown-pane--open': showAttributeDropDown }"
          class="dropdown-pane"
        >
          <custom-attribute-drop-down
            v-if="showAttributeDropDown"
            :attribute-type="attributeType"
            :contact-id="contactId"
            @add-attribute="addAttribute"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomAttributeDropDown from './CustomAttributeDropDown.vue'
import alertMixin from '@/yichat.web.share/mixins/alertMixin'
import attributeMixin from '@/mixins/attributeMixin'
import { mixin as clickaway } from 'vue-clickaway'
import { BUS_EVENTS } from '@/yichat.web.share/constants/busEvents'

export default {
  components: {
    CustomAttributeDropDown,
  },
  mixins: [clickaway, alertMixin, attributeMixin],
  props: {
    attributeType: {
      type: String,
      default: 'Conversation',
    },
    contactId: { type: String, default: null },
  },
  data () {
    return {
      showAttributeDropDown: false,
    }
  },
  methods: {
    async addAttribute (attribute) {
      try {
        const { attributeKey } = attribute
        if (this.attributeType === 'Conversation') {
          await this.$store.dispatch('updateCustomAttributes', {
            conversationId: this.conversationId,
            customAttributes: {
              ...this.customAttributes,
              [attributeKey]: null,
            },
          })
        } else {
          await this.$store.dispatch('contacts/update', {
            id: this.contactId,
            customAttributes: {
              ...this.customAttributes,
              [attributeKey]: null,
            },
          })
        }
        bus.$emit(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, attributeKey)
        this.showAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.SUCCESS'))
      } catch (error) {
        const errorMessage =
          error?.response?.message ||
          this.$t('CUSTOM_ATTRIBUTES.FORM.ADD.ERROR')
        this.showAlert(errorMessage)
      } finally {
        this.closeDropdown()
      }
    },

    toggleAttributeDropDown () {
      this.showAttributeDropDown = !this.showAttributeDropDown
    },

    closeDropdown () {
      this.showAttributeDropDown = false
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-attribute--selector {
  width: 100%;
  padding: var(--space-slab) var(--space-normal);

  .label-wrap {
    line-height: var(--space-medium);
    position: relative;

    .dropdown-wrap {
      display: flex;
      left: -1px;
      margin-right: var(--space-medium);
      position: absolute;
      top: var(--space-medium);
      width: 100%;

      .dropdown-pane {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}

.error {
  color: var(--r-500);
  font-size: var(--font-size-mini);
  font-weight: var(--font-weight-medium);
}
</style>
